<template>
  <div>
    <span v-if="!isEdit">大标题</span>
    <input ref="myInp" v-else type="text" placeholder="请输入用户名">
    <button @click="onClick">{{ isEdit ? '确认' : '编辑' }}</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isEdit: false,
    }
  },
  methods: {
    onClick() {
      this.isEdit = !this.isEdit
      // 方式一:
      // setTimeout(() => {
      //   this.$refs.myInp.focus()
      // }, 0)

      // 方式二:
      this.$nextTick(() => {
        // 函数体中的代码一定会等待 DOM 更新之后再执行
        this.$refs.myInp.focus()
      })
    }
  }
}
</script>

<style></style>
